<template>
  <div>
    <a-spin :spinning="spinning">
      <a-form-model ref="form" :model="form" layout="inline" style="margin-bottom:24px;">
        <a-form-model-item label="客户名称" prop="custNameLike">
          <a-input v-model="form.custNameLike" />
        </a-form-model-item>
        <a-form-model-item label="公司编号/运单号/箱号/封号" prop="codeLike">
          <a-input v-model="form.codeLike" />
        </a-form-model-item>
        <a-form-model-item label="驳船、海船船名/航次" prop="shipNameLike">
          <a-input v-model="form.shipNameLike" />
        </a-form-model-item>
        <a-form-model-item label="结算类型" prop="settlementType">
          <a-select v-model="form.settlementType" style="width:90px">
            <a-select-option value>全部</a-select-option>
            <!-- <a-select-option :value="2">月结</a-select-option> -->
            <!-- <a-select-option :value="1">票结</a-select-option> -->
            <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="运输条款" prop="transportTerms">
          <a-select v-model="form.transportTerms" style="width:110px">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="DO-DO">门到门</a-select-option>
            <a-select-option value="DO-CY">门到港</a-select-option>
            <a-select-option value="CY-DO">港到门</a-select-option>
            <a-select-option value="CY-CY">港到港</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="订单类型" prop="orderType">
          <a-select v-model="form.orderType" style="width:135px">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
            <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
            <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
            <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
            <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
            <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-input-group compact>
            <!-- <a-form-model-item prop="dateSearchType"> 为了样式注释掉,如果需要恢复告诉我-->
            <a-select v-model="form.dateSearchType" style="width:110px">
              <a-select-option :value="1">创建日期</a-select-option>
              <a-select-option :value="2">装货日期</a-select-option>
              <a-select-option :value="3">完成日期</a-select-option>
              <a-select-option :value="5">反重日期</a-select-option>
            </a-select>
            <!-- </a-form-model-item> -->
            <!-- <a-form-model-item prop> -->
            <a-range-picker
              v-if="form.dateSearchType === 2"
              :value="createValue"
              @change="onChange"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              style="width:300px"
            >
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <a-range-picker v-else @change="onChange" :value="createValue" style="width:300px">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <!-- </a-form-model-item> -->
          </a-input-group>
        </a-form-model-item>
        <a-form-model-item label="始发港" prop="startPortLike">
          <a-input v-model="form.startPortLike" />
        </a-form-model-item>
        <a-form-model-item label="目的港" prop="endPortLike">
          <a-input v-model="form.endPortLike" />
        </a-form-model-item>
        <a-form-model-item label="所属部门" prop="deptId">
          <a-tree-select
            class="selectInputWidth"
            v-model="form.deptId"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :load-data="onLoadData"
            :tree-data="deptTreeData"
            placeholder="请选择"
            @change="onChangeTree"
          ></a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="所属销售" prop="sellerId">
          <a-select v-model="form.sellerId" class="selectInputWidth">
            <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属操作" prop="handlerId">
          <a-select v-model="form.handlerId" class="selectInputWidth">
            <!-- <a-select-option value>请选择操作员</a-select-option> -->
            <a-select-option
              v-for="(item,index) in handlerList"
              :key="index"
              :value="item.uiId"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="是否待跟踪" prop="isTrack">
          <a-select v-model="form.isTrack" style="width:110px">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="放货状态" prop="releaseStatus">
          <a-select v-model="form.releaseStatus" style="width:110px">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="2">可放货</a-select-option>
            <a-select-option value="1">扣货</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="陆运状态" prop="dispatcherStatus">
          <a-select v-model="form.dispatcherStatus" style="width:110px">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">未派单到陆运</a-select-option>
            <a-select-option :value="2">已派单到陆运</a-select-option>
            <a-select-option :value="3">陆运中</a-select-option>
            <a-select-option :value="4">陆运已完成</a-select-option>
            <a-select-option :value="5">陆运已作废</a-select-option>
            <a-select-option :value="6">陆运异常结束</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="收货人" prop="consigneeLike">
          <a-input v-model="form.consigneeLike" class="selectInputWidth" />
        </a-form-model-item>
        <a-form-model-item label="费用是否已录完" prop="isCostRecorded">
          <a-select v-model="form.isCostRecorded" style="width:150px">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="持箱人" prop="holderId">
          <a-select v-model="form.holderId" style="width:200px">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in holderList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="收货地址" prop="consigneeAddressLike">
          <a-input v-model="form.consigneeAddressLike" class="selectInputWidth" />
        </a-form-model-item>
        <!-- <a-form-model-item label="装船状态" prop="voyageContainerStatus">
          <a-select v-model="form.voyageContainerStatus" style="width:150px">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">已预装</a-select-option>
            <a-select-option :value="2">已实装</a-select-option>
            <a-select-option :value="4">未装船</a-select-option>
            <a-select-option :value="3">已卸船</a-select-option>
          </a-select>
        </a-form-model-item>-->
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="checkAll">全选/反选</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="showModal">箱号批量查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="confirmLoad">确定预装船</a-button>
        </a-form-model-item>
      </a-form-model>
      <!-- 订单审核列表 -->
      <a-row class="orderItem ordertem_de order_co" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-row>
                  <a-col :span="1" class="order_check">
                    <a-checkbox
                      :disabled="v.status=== 1 ? false: true"
                      :value="v.id"
                      :checked="v.status === 1 ? v.checked : false"
                      @change="checkboxChange"
                    />
                  </a-col>
                  <a-col :span="23">
                    <a-descriptions :column="5" class="titleCard" style="padding-left:5px;">
                      <a-descriptions-item label="公司编号">
                        <a-tooltip placement="top" :title="v.shipOrderCode || '--'">
                          <span>{{v.shipOrderCode || '--'}}</span>
                        </a-tooltip>
                      </a-descriptions-item>
                      <a-descriptions-item label="运单号">{{v.seagoingShipOrderCode || '--'}}</a-descriptions-item>
                      <a-descriptions-item
                        label="驳船船名航次"
                      >{{v.shipName || '--'}}/{{v.voyageNumber || '--'}}</a-descriptions-item>
                      <a-descriptions-item label="创建日期">{{v.createTime || '--'}}</a-descriptions-item>
                      <a-descriptions-item label="所属销售">{{v.seller || '--'}}</a-descriptions-item>
                    </a-descriptions>
                  </a-col>
                </a-row>
              </template>
              <a-descriptions :column="4" size="small" class="order_detail">
                <a-descriptions-item label="客户名称">
                  <a-tooltip placement="top" :title="v.custName || '--'">
                    <span>{{v.custName || '--'}}</span>
                  </a-tooltip>
                </a-descriptions-item>
                <template>
                  <a-descriptions-item v-if="v.transportTerms=== 'DO-DO'" label="运输条款">门到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'DO-CY'" label="运输条款">门到港</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-DO'" label="运输条款">港到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-CY'" label="运输条款">港到港</a-descriptions-item>
                </template>
                <a-descriptions-item label="箱型箱量">{{v.containerType}}*{{v.containerNum}}</a-descriptions-item>
                <a-descriptions-item
                  label="起运/目的港"
                >{{v.startPortName||'--'}} / {{v.endPortName||'--'}}</a-descriptions-item>
                <template>
                  <a-descriptions-item
                    v-if="v.orderType === 'DOMESTIC_TRADE_EXPORTS'"
                    label="订单类型"
                  >内贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'DOMESTIC_TRADE_IMPORTS'"
                    label="订单类型"
                  >内贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_EXPORTS'"
                    label="订单类型"
                  >外贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_IMPORTS'"
                    label="订单类型"
                  >外贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_EXPORTS'"
                    label="订单类型"
                  >联运出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_IMPORTS'"
                    label="订单类型"
                  >联运进口订单</a-descriptions-item>
                </template>
                <a-descriptions-item label="箱号">{{v.containerNo || '--'}}</a-descriptions-item>
                <a-descriptions-item label="货名">{{v.goodsName || '--'}}</a-descriptions-item>
                <a-descriptions-item label="装货时间">{{v.loadingTime || '--'}}</a-descriptions-item>
              </a-descriptions>
              <a-row>
                <a-col :span="6">
                  <a-descriptions :column="1" size="small" class="order_detail">
                    <a-descriptions-item label="收货联系人">{{v.consignee || '--'}}</a-descriptions-item>
                  </a-descriptions>
                </a-col>
                <a-col :span="18">
                  <a-descriptions :column="1" size="small" class="order_detail">
                    <a-descriptions-item label="销售备注">
                      <a-tooltip placement="top" :title="v.sellerRemark || '--'">
                        <span>{{v.sellerRemark || '--'}}</span>
                      </a-tooltip>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-col>
              </a-row>
            </a-card>
            <a-card size="small" style="border-top:none" class="order_czuo ddzx_czuo">
              <template slot="title">
                <template>
                  <a-badge v-if="v.status === 1" color="#7CB305" text="进行中" />
                  <a-badge v-else-if="v.status === 2" color="#474747" text="已完成" />
                  <a-badge v-else-if="v.status === 3" color="#474747" text="已完成-异常" />
                  <a-badge v-else-if="v.status === 4" color="#FAAD14" text="已结算" />
                  <a-badge v-else-if="v.status === 5" color="#CF1322" text="已作废" />
                </template>
                <template>
                  <span v-if="v.isTrack === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt9.png" alt />
                    <span>待跟踪</span>
                  </span>
                  <span v-if="v.releaseStatus === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt10.png" alt />
                    <span>扣货</span>
                  </span>
                  <span v-if="v.releaseStatus === 2" class="ddzx_zhuant">
                    <img src="@@/images/order_zt11.png" alt />
                    <span>可放货</span>
                  </span>
                  <!-- <span
                    v-if="v.isTruckOrderComplete === 0 && v.dispatcherStatus === 1"
                    class="ddzx_zhuant"
                  >
                    <img src="@@/images/order_zt2.png" alt />
                    <span style="line-height:28px;">已派单到陆运</span>
                  </span>-->
                  <span v-if="v.orderTruckStatus === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt1.png" alt />
                    <span style="line-height:28px;">未派单到陆运</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 2" class="ddzx_zhuant">
                    <img src="@@/images/order_zt2.png" alt />
                    <span style="line-height:28px;">已派单到陆运</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 3" class="ddzx_zhuant">
                    <img src="@@/images/order_zt16.png" alt />
                    <span style="line-height:28px;">陆运中</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 4" class="ddzx_zhuant">
                    <img src="@@/images/order_zt17.png" alt />
                    <span style="line-height:28px;">陆运已完成</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 5" class="ddzx_zhuant">
                    <img src="@@/images/order_zt15.png" alt />
                    <span style="line-height:28px;">陆运已作废</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 6" class="ddzx_zhuant">
                    <img src="@@/images/order_zt14.png" alt />
                    <span style="line-height:28px;">陆运异常结束</span>
                  </span>
                  <span v-if="v.isCostRecorded === 1" class="ddzx_zhuant">
                    <img src="@@/images/feid1.png" alt />
                    <span style="line-height:28px;">费用已录完</span>
                    <span
                      v-if="v.costRecordedTime"
                      style="line-height:28px;"
                    >（{{v.costRecordedTime}}）</span>
                  </span>
                </template>
              </template>
              <a-button
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="orderDetail(v)"
              >详情</a-button>
            </a-card>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :page-size-options="['10', '30', '50', '100', '500']"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <!-- </a-checkbox-group> -->
      <a-empty v-else />
    </a-spin>
    <a-modal
      v-model="checkVisible"
      title="箱号批量查询"
      :body-style="{padding:'30px 40px 25px'}"
      :width="600"
      centered
      okText="查询"
      @cancel="cancelCheck"
      @ok="containerCheck"
      destroyOnClose
    >
      <a-textarea v-model="containerValue" placeholder="请输入箱号进行查询" :auto-size="{ minRows: 6 }" />
      <div style="margin-top:10px">*输入时请注意，每行一个箱号</div>
    </a-modal>
  </div>
</template>
<script>
import {mixin} from '@/common/common'
import { querySellerDown, queryDeptDown } from '@/api'
import {
  queryShipOrderListForAdvanceLoad,
  advanceLoadContainerFromOrder
} from '@/api/orderCenter'
import moment from 'moment'
import { queryHolderNameList } from '@/api/boxManagementCenter'
const deptData = {
  type: 2, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
const defaultForm = () => ({
  isCostRecorded: '',
  consigneeLike: '',
  deptId: '', // 所属部门id
  sellerId: '', // 销售id
  handlerId: '', // 操作员id
  status: 1, // 状态 1进行中，2已完成，3已完成-异常，4已结算，5已作废
  custNameLike: '', // 客户名称
  codeLike: '', // 公司编号/运单号/箱号/封号
  shipNameLike: '', // 驳船、海船船名/航次
  orderType: '', // 订单类型
  transportTerms: '', // 运输条款 DO-CY 门到港 以此类推
  settlementType: '', // 结算方式：1票结，2月结
  startPortLike: '', // 起运港
  endPortLike: '', // 目的港
  dateSearchType: 1, // 1、创建时间 2、装货时间 3.完成时间
  startDate: '', // 开始时间
  endDate: '', // 结束时间
  isTrack: '', // 是否待跟踪
  dispatcherStatus: '', // 陆运状态
  releaseStatus: '', // 放货状态：0初始化，1扣货，2可放货
  holderId: '',
  consigneeAddressLike: ''
  // voyageContainerStatus: ''
})
export default {
  name: 'order',
  mixins: [mixin],
  props: {
    orderObj: Object
  },
  data () {
    return {
      createValue: [],
      handlerList: [],
      form: {
        ...defaultForm()
      },
      spinning: false,
      checkAllorNot: false,
      checkedNumber: 0,
      checkedIdArray: [],
      listData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      deptTreeData: [],
      sellers: [],
      containerValue: '',
      checkVisible: false,
      containerNoList: [],
      holderList: []
    }
  },
  methods: {
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => { })
    },
    momentDate (date, format) {
      return moment(date)
    },
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // // console.log(res)
          this.handlerList = res.data
          this.handlerList = res.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.handlerId = this.handlerList[0].uiId
          this.orderListRequest({
            ...this.form,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
        })
        .catch(rs => { })
    },
    orderListRequest (e) {
      this.checkAllorNot = false
      queryShipOrderListForAdvanceLoad(e)
        .then(res => {
          // // console.log(res.data)
          let list = res.data.list
          list.forEach(element => {
            element.checked = false
          })
          this.listData = list
          // let { pageNum, pageSize, total, pages } = res.data
          // this.pagination = { pageNum, pageSize, total, pages }
          this.pagination = this.getPagination(res.data)
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => { })
    },
    loadContainerRequest (e) {
      advanceLoadContainerFromOrder(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('预装成功！')
            this.checkedIdArray = []
            this.checkedNumber = 0
            setTimeout(() => {
              this.$emit('setOrderVisible', true)
            }, 500)
          }
        })
        .catch(rs => { })
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    onChange (date, dateString) {
      this.createValue = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    handleSubmit () {
      this.orderListRequest({
        ...this.form,
        containerNoList: this.containerNoList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    check () {
      this.pageNum = 1
      // this.pageSize = 10
      this.handleSubmit()
    },
    checkboxChange (e) {
      let itemId = e.target.value
      let list = this.listData
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === itemId) {
          // // console.log(list[i])
          list[i].checked = !list[i].checked
          break
        }
      }
    },
    checkAll () {
      this.checkAllorNot = !this.checkAllorNot
      this.listData.forEach(v => {
        v.checked = this.checkAllorNot
      })
    },
    orderDetail (e) {
      window.open(`/orderCenter/order/detail/${e.id}`, '_blank')
    },
    confirmLoad () {
      let _s = this
      _s.checkedNumber = 0
      _s.checkedIdArray = []
      _s.listData.forEach(v => {
        if (v.checked === true) {
          _s.checkedNumber++
          _s.checkedIdArray.push(v.id)
        }
      })
      if (_s.checkedNumber === 0) {
        _s.$message.error('请先选择订单')
        return false
      }
      const h = _s.$createElement
      _s.$confirm({
        title: h('div', {}, [
          h('span', '确定预装船此'),
          h(
            'span',
            {
              style: {
                padding: '0 3px',
                color: 'orange',
                fontSize: '20px',
                lineHeight: '22px'
              }
            },
            _s.checkedNumber
          ),
          h('span', '个订单？')
        ]),
        onOk () {
          _s.loadContainerRequest({
            idList: _s.checkedIdArray,
            ..._s.orderObj
          })
        }
      })
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      queryDeptDown(e).then(rsp => {
        let initData = []
        rsp.data.forEach((value, index) => {
          initData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId
          })
        })
        // this.form.deptId = rsp.data[0].deptId
        this.deptTreeData = initData
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      querySellerDown({ ...sellerData, deptId }).then(rsp => {
        this.sellers = rsp.data.map((v, i) => {
          if (!v.uiId) {
            v.name = '请选择'
            v.uiId = ''
          }
          return v
        })
        // this.form.sellerId = rsp.data[0].uiId
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    },
    showModal () {
      this.containerValueT = this.containerValue
      this.checkVisible = true
    },
    containerCheck () {
      let containerNoList = this.containerValue.split(/[\s\n]/)
      // // console.log(containerNoList)
      if (containerNoList.length === 1 && containerNoList[0] === '') {
        containerNoList = []
      }
      this.containerNoList = containerNoList
      // this.form.portId = this.orderObj.portId
      this.orderListRequest({
        ...this.form,
        containerNoList: this.containerNoList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      setTimeout(() => {
        this.checkVisible = false
      }, 200)
    },
    cancelCheck () {
      this.containerValue = this.containerValueT
      this.checkVisible = false
    }
  },
  watch: {
    orderObj () {
      if (this.orderObj) {
        this.pageNum = 1
        // this.pageSize = 10
        this.createValue = []
        Object.assign(this.form, defaultForm())
        this.pagination = this.getPagination()
        this.holderListRequest({})
        this.handlerListRequest({
          type: 1,
          dataRole: 'CONTAINER_OPR',
          status: 1
        })
      }
    }
  },
  mounted () {
    this.pageNum = 1
    this.pageSize = 10
    this.createValue = []
    Object.assign(this.form, defaultForm())
    this.pagination = this.getPagination()
    // 所属部门
    this.initDept(deptData)
    // 所属销售
    this.initSellerDown()
    this.holderListRequest({})
    this.handlerListRequest({
      type: 1,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
  }
}
</script>
<style>
.order_check .ant-checkbox-wrapper {
  float: left;
  height: 21px;
  line-height: 21px;
  margin-left: 20px;
}
.order_co .orderList {
  margin: 0 0px 20px 0px;
  border: 1px #e8e8e8 solid;
}
</style>
